<template>
  <div>
    <nav-search @search="onSearch"></nav-search>
    <div>
      <van-tabs v-model="active" title-active-color="#333333" title-inactive-color="#808080">
        <van-tab title="待确认"></van-tab>
        <van-tab title="待审核"></van-tab>
        <van-tab title="已审核"></van-tab>
        <van-tab title="审核失败"></van-tab>
      </van-tabs>
    </div>
    <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
      <info-detail :data="list"></info-detail>
    </van-list>
    <!-- 状态 0:数据为空;1:网络错误 -1:不显示(默认)-->
    <data-status :status="dataStatus"></data-status>
    <van-icon name="add-o" size="50" color="#38f" class="add-corp-icon" @click="goAddCorp" />
  </div>
</template>

<script>
import NavSearch from "../../components/commons/navSearch";
import dataStatus from "../../components/commons/dataStatus";
import InfoDetail from "../../components/enterprise/info-detail";
import Vue from "vue";
import { List, Empty, Toast } from "vant";

Vue.use(List);
// 表单配置
import { enterpriseInfoForm } from "../../components/form/config";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "enterpriseinfo"
);
// 企业信息
export default {
  name: "enterpriseInfo",
  data(){
    return{
      active:0
    }
  },
  components: { NavSearch, InfoDetail, dataStatus },
  computed: {
    ...mapState({
      title: state => state.title,
      list: state => state.list,
      loading: state => state.loading,
      finished: state => state.finished,
      finishedText: state => state.finishedText,
      params: state => state.params,
      dataStatus: state => state.dataStatus,
      isSearch: state => state.isSearch,
      updateCorpStatus: state => state.updateCorpStatus
    })
  },
  created() {
    this.mutClearList();
    this.mutReset();
  },
  watch: {
    active:function (e,v) {
      this.setstatus(e)
      this.mutClearList();
      this.actList()
    }
  },
  methods: {
    ...mapActions(["actList", "actSearchList"]),
    ...mapMutations(["mutClearList", "mutParams","setstatus","mutIsSearch", "mutReset"]),
    onLoad() {
      //异步加载
      if (this.isSearch) {
        this.actSearchList().then(respponse => {
          // if (respponse == null) {
          //   Toast(this.updateCorpStatus.text);
          // }
        });
      } else {
        this.actList().then(respponse => {
          // if (respponse == null) {
          //   Toast(this.updateCorpStatus.text);
          // }
        });
      }
    },
    onSearch(val) {
      if (val == "") {
        this.mutReset();
        this.mutIsSearch({ isSearch: false });
        this.actList().then(respponse => {
          if (respponse == null) {
            Toast(this.updateCorpStatus.text);
          }
        });
      } else {
        if (this.params.data != val) {
          this.mutClearList();
          this.mutParams({ data: val });
          this.mutIsSearch({ isSearch: true });
          this.actSearchList().then(respponse => {
            if (respponse == null) {
              // Toast(this.updateCorpStatus.text);
            }
          });
        }
      }
    },
    goAddCorp() {
      this.$router.push({
        name: "enterpriseDetail",
        query:{
          type:-1
        },
        params: {
          form: enterpriseInfoForm(),
          isModify: false,
          name: "enterpriseInfo"
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
}
.add-corp-icon {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 999;
}
</style>
